<template>
  <div class="container">
    <div class="hd">
      <h1 class="page_title">{{deptName}}</h1>
    </div>
    <div class="weui_cells_title" v-show="showEmpty">{{emptyMsg}}</div>
    <div class="weui_cells weui_cells_access" style="margin-top:0;">
      <a class="weui_cell" href="javascript:;" v-for="doctor in doctors" @click="goToDocdorSchedule($index)">
        <div class="weui_cell_hd">
          <img :src="doctor.doctorPicUrl" alt="icon" style="width:90px;height:100px;margin-right:5px;display:block">
        </div>
        <div class="weui_cell_bd weui_cell_primary">
          <p>{{doctor.doctorName}}</p>
          <p><span class="orange_tag">{{doctor.regType}}</span></p>
        </div>
        <div class="weui_cell_bd">
          <p>
            <span class="blue_tag">剩 {{doctor.leaveCount}}</span>
            <!-- <span class="blue_tag">{{doctor.regAmt}} 元</span> -->
          </p>
        </div>
        <div class="weui_cell_ft"></div>
      </a>
    </div>
    <partial name="footer-copyright"></partial>
  </div>
</template>
<style scoped>
.hd {
  padding: .5em 0;
}

.page_title {
  text-align: center;
  font-size: 20px;
  color: #B86086;
  font-weight: 400;
  margin: 0 5%;
}

.blue_tag {
  background-color: #0ae;
  color: #fff;
  font-size: 13px;
  padding: 2px 4px;
  border: none;
  vertical-align: middle;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

.orange_tag {
  background-color: #ff8208;
  color: #fff;
  font-size: 13px;
  padding: 2px 4px;
  border: none;
  vertical-align: middle;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}
</style>
<script>
import _ from 'underscore'

export default {
  name: 'BookDoctorListView',
  data: function () {
    return {
      deptId: '',
      deptName: '',
      doctors: [],
      showEmpty: false,
      emptyMsg: ''
    }
  },
  ready: function () {
    this.deptId = this.$route.query.deptId
    this.deptName = this.$route.query.deptName
    this.getBookDoctorList()
  },
  methods: {
    getBookDoctorList: function () {
      var self = this
      this.$ajax.get('GetBookDoctorList', 'Book', { deptId: this.deptId }).then(function (data) {
        if (data.ResultCode === '0') {
          self.doctors = _.map(data.Doctors, function (val) {
            return {
              doctorId: val.DoctorId,
              doctorName: val.DoctorName,
              doctorPicUrl: val.DoctorPic,
              regType: val.RegType,
              regAmt: val.RegAmt,
              leaveCount: val.LeaveCount
            }
          })

          if (self.doctors.length <= 0) {
            self.showEmpty = true
            self.emptyMsg = '无医生排班'
            self.doctors = []
          }
        }
      })
    },
    goToDocdorSchedule: function (idx) {
      var doctor = this.doctors[idx]
        // console.log('deptId:' + this.deptId)
        // console.log('doctor:' + doctor)
        // console.log('regType:' + doctor.regType)
      this.$router.go({ name: 'bookDoctorSchedule', query: { deptId: this.deptId, deptName: this.deptName, doctorId: doctor.doctorId, doctorName: doctor.doctorName, regType: doctor.regType } })
    }
  }
}
</script>
